<template>
  <div class="m-app-container m-apply-index">
    <p>请选择：</p>
    <div class="m-apply-options clearfix">
      <div class="fl" :class="{'actived': curType == 'p'}" @click="curType = 'p'">
        <div class="item">
          <div class="img">
            <img src="../../assets/person.png" alt="">
          </div>
          <p>个人</p>
        </div>
      </div>
      <div class="fr" :class="{'actived': curType == 'c'}" @click="curType = 'c'">
        <div class="item">
          <div class="img">
            <img src="../../assets/componey.png" alt="">
          </div>
          <p>企业</p>
        </div>
      </div>
    </div>
    <div class="btn-next">
      <w-button type="main" @on-click="onNext">下一步</w-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      curType: ''
    }
  },
  methods: {
    /**
     * 选择下一步操作
     */
    onNext() {
      if (this.curType == 'p') {
        this.$router.push('papply')
        return
      }
      this.$router.push('capply')
    }
  }
}
</script>


<style lang="scss" scoped>
@import '../../scss/_var.scss';
.m-apply-index {
  width: 100%;
  background-color: $color-white;
  margin: 30px auto; 
  padding: 20px;
}
.m-apply-options {
  width: 66%;
  margin: 20px auto;
  text-align: center;
  & > div {
    width: 300px;
    height: 420px;
    cursor: pointer;
    border: 1px solid #DADADA;
  }
  .actived {
    border: 1px solid ;
    border-image: linear-gradient(90deg,rgba(252, 120, 58,1) 0%,rgba(243,26,43,1) 100%) !important;
    box-shadow: 0px 0px 5px 1px rgba(230, 19, 39, 0.5);
    p {
      background:linear-gradient(180deg, rgba(252,120,58,1) 0%, rgba(255,81,73,1) 100%);
      -webkit-background-clip:text;
      -webkit-text-fill-color:transparent;
    }
  }
  .item {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    height: 100%;
    p {
      font-size: 20px;
    }
  }
  .img {
    width:70px;
    height:74px;
    margin-bottom: 30px;
  }
}
.btn-next {
  text-align: right;
}
</style>
